<template>
  <div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-cell-group>
        <van-swipe :autoplay="3000" indicator-color="green">
          <van-swipe-item v-for="item in swiperImg" :key="item.id">
            <img :src="item.src" alt />
          </van-swipe-item>
        </van-swipe>
      </van-cell-group>
    </div>
    <!-- 描述 -->
    <van-cell-group v-for="(item,i) in goodImgArr" :key="i">
      <div class="title">{{item.title}}</div>
      <p class="price">
        市场价:
        <span>¥{{item.sell_price}}</span>销售价
        <em>¥ {{item.sell_price}}</em>
      </p>
      <div class="count">
        购买数量
        <van-stepper v-model="value" input-width="40px" button-size="32px" min="1" />
      </div>
      <div class="buttons">
        <van-button type="info">立即购买</van-button>
        <van-button type="danger">加入购物车</van-button>
      </div>
    </van-cell-group>
    <!-- 商品参数 -->
    <van-cell-group>
      <div class="title">商品参数</div>
      <div class="body">
        <p>商品货号: {{this.Detail.goods_no}}</p>
        <p>库存情况: {{this.Detail.stock_quantity}} 件</p>
        <p>上架时间: {{$dayjs(this.Detail.add_time).format('YYYY-MM-DD')}}</p>
      </div>
      <div class="btns">
        <van-button @click="$router.push('/goodsdesc/' + $route.params.id)" size="large" plain type="info">图文介绍</van-button>
        <van-button @click="$router.push('/goodscomments/' + $route.params.id)" size="large" plain type="danger">商品评论</van-button>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      value: 1,
      // goodsDetails: {},
      goodImgArr: [],
      swiperImg: [],
      Detail: []
    }
  },
  created () {
    // 获取图文介绍
    // this.getGoodsList()
    // 获取商品参数
    this.getGoodImgArr()
    // 获取轮播数据
    this.getSwiperImg()
    // 参数区
    this.getInfo()
  },
  methods: {
    // async getGoodsList () {
    //   const { data: res } = await this.$http.get(`/api/goods/getdesc/${this.$route.params.id}`)
    //   this.goodsDetails = res.message[0]
    //   console.log(this.goodsDetails)
    // },
    async getGoodImgArr () {
      const { data: res } = await this.$http.get(
        '/api/goods/getshopcarlist/' + this.$route.params.id
      )
      this.goodImgArr = res.message
      console.log(this.goodImgArr)
    },
    // eslint-disable-next-line no-irregular-whitespace
    async getSwiperImg () {
      const { data: res } = await this.$http.get(`/api/getthumimages/${this.$route.params.id}`)
      this.swiperImg = res.message
      console.log(this.swiperImg)
    },
    async getInfo () {
      const { data: res } = await this.$http.get(
        `/api/goods/getinfo/${this.$route.params.id}`
      )
      console.log(res)
      this.Detail = res.message[0]
    }
  }
}
</script>

<style lang="less" scoped>
.swiper {
  img {
    width: 50%;
    height: 50%;
  }
}
.van-cell-group {
  border-radius: 2px;
  margin: 5px 15px;
  border: 2px solid #b8b8be67;
}
.van-swipe {
  // height: 207px;
  .van-swipe-item {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .van-image {
    width: 50%;
    height: 50%;
  }
}
.price {
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: -70px;
  color: #8f8f94;
  em {
    font-weight: 600;
    margin-left: 15px;
    font-size: 16px;
    color: red;
  }
}
.title {
  font-size: 18px;
  font-weight: 530;
  margin: 10px;
  border-bottom: 1px solid #b8b8be67;
}
.van-stepper {
  display: inline-block;
  margin: 10px;
}
.buttons {
  margin: 10px 10px 30px 30px;
}
.btns {
  margin: 55px 30px;
  button {
    margin: 5px 0;
    border-radius: 3px;
  }
}
</style>
